<template>
  <div class="space-y-6">
    <!-- 页面标题 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h1 class="text-2xl font-bold text-gray-900 mb-2">报到办理</h1>
      <p class="text-gray-600">完成新生报到相关手续，确保顺利入学</p>
    </div>

    <!-- 报到进度 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">报到进度</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <span class="text-sm font-medium text-gray-700">整体进度</span>
          <span class="text-sm font-medium text-green-600">{{ overallProgress }}%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-green-500 h-2 rounded-full transition-all duration-300" :style="{ width: overallProgress + '%' }"></div>
        </div>
      </div>
    </div>

    <!-- 报到步骤 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-6">报到步骤</h2>
      <div class="space-y-4">
        <div
          v-for="(step, index) in registrationSteps"
          :key="step.id"
          class="flex items-start space-x-4 p-4 rounded-lg border transition-colors"
          :class="[
            step.status === 'completed' ? 'bg-green-50 border-green-200' :
            step.status === 'current' ? 'bg-blue-50 border-blue-200' :
            'bg-gray-50 border-gray-200'
          ]"
        >
          <!-- 步骤图标 -->
          <div class="flex-shrink-0">
            <div
              class="w-8 h-8 rounded-full flex items-center justify-center"
              :class="[
                step.status === 'completed' ? 'bg-green-500 text-white' :
                step.status === 'current' ? 'bg-blue-500 text-white' :
                'bg-gray-300 text-gray-600'
              ]"
            >
              <i v-if="step.status === 'completed'" class="icon-[heroicons--check] w-4 h-4"></i>
              <span v-else class="text-sm font-medium">{{ index + 1 }}</span>
            </div>
          </div>

          <!-- 步骤内容 -->
          <div class="flex-1">
            <div class="flex items-center justify-between">
              <h3 class="text-sm font-medium text-gray-900">{{ step.title }}</h3>
              <span
                class="px-2 py-1 text-xs font-medium rounded-full"
                :class="[
                  step.status === 'completed' ? 'bg-green-100 text-green-800' :
                  step.status === 'current' ? 'bg-blue-100 text-blue-800' :
                  'bg-gray-100 text-gray-600'
                ]"
              >
                {{ getStatusText(step.status) }}
              </span>
            </div>
            <p class="text-sm text-gray-600 mt-1">{{ step.description }}</p>
            
            <!-- 操作按钮 -->
            <div v-if="step.status === 'current'" class="mt-3">
              <button
                @click="handleStepAction(step)"
                class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded-lg hover:bg-blue-600 transition-colors"
              >
                {{ step.actionText }}
              </button>
            </div>
            
            <!-- 完成时间 -->
            <div v-if="step.status === 'completed' && step.completedAt" class="mt-2">
              <span class="text-xs text-gray-500">完成时间: {{ formatDate(step.completedAt) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 重要提醒 -->
    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
      <div class="flex items-start space-x-3">
        <i class="icon-[heroicons--exclamation-triangle] w-5 h-5 text-yellow-600 mt-0.5"></i>
        <div>
          <h3 class="text-sm font-medium text-yellow-800">重要提醒</h3>
          <div class="mt-2 text-sm text-yellow-700">
            <ul class="list-disc list-inside space-y-1">
              <li>请按照步骤顺序完成报到手续</li>
              <li>所有材料必须真实有效，如有虚假将影响入学</li>
              <li>如遇问题请及时联系辅导员或招生办</li>
              <li>报到截止时间：{{ registrationDeadline }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系方式 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">联系方式</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="flex items-center space-x-3">
          <i class="icon-[heroicons--phone] w-5 h-5 text-gray-400"></i>
          <div>
            <p class="text-sm font-medium text-gray-900">招生办电话</p>
            <p class="text-sm text-gray-600">0571-88888888</p>
          </div>
        </div>
        <div class="flex items-center space-x-3">
          <i class="icon-[heroicons--envelope] w-5 h-5 text-gray-400"></i>
          <div>
            <p class="text-sm font-medium text-gray-900">邮箱</p>
            <p class="text-sm text-gray-600">admission@university.edu.cn</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../../stores/app'

const router = useRouter()
const appStore = useAppStore()

// 响应式数据
const registrationSteps = ref([
  {
    id: 1,
    title: '个人信息确认',
    description: '确认并完善个人基本信息',
    status: 'completed',
    actionText: '查看详情',
    completedAt: '2024-08-15 10:30:00'
  },
  {
    id: 2,
    title: '学费缴纳',
    description: '完成学费和住宿费缴纳',
    status: 'current',
    actionText: '去缴费'
  },
  {
    id: 3,
    title: '宿舍申请',
    description: '选择并申请宿舍床位',
    status: 'pending',
    actionText: '申请宿舍'
  },
  {
    id: 4,
    title: '体检报告上传',
    description: '上传入学体检报告',
    status: 'pending',
    actionText: '上传体检报告'
  },
  {
    id: 5,
    title: '现场报到',
    description: '到校完成现场报到手续',
    status: 'pending',
    actionText: '查看详情'
  }
])

const registrationDeadline = ref('2024年9月1日')

// 计算属性
const overallProgress = computed(() => {
  const completedSteps = registrationSteps.value.filter(step => step.status === 'completed').length
  return Math.round((completedSteps / registrationSteps.value.length) * 100)
})

// 方法
const getStatusText = (status) => {
  const statusMap = {
    completed: '已完成',
    current: '进行中',
    pending: '待办理'
  }
  return statusMap[status] || '未知'
}

const handleStepAction = (step) => {
  switch (step.id) {
    case 1:
      router.push('/student/profile')
      break
    case 2:
      router.push('/student/payment')
      break
    case 3:
      router.push('/student/dormitory')
      break
    case 4:
      // 处理体检报告上传
      appStore.showInfo('体检报告上传功能开发中')
      break
    case 5:
      // 显示现场报到信息
      appStore.showInfo('现场报到详情功能开发中')
      break
    default:
      appStore.showInfo('功能开发中')
  }
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 生命周期
onMounted(() => {
  appStore.setPageTitle('报到办理')
})
</script>

<style scoped>
/* 自定义样式 */
</style>